<template>
  <div class="appendMember">
    <div v-for="(item,index) in appendData" :key="index" class="item" :style="item.key === 'address'?'width:100%':''">
      <div class="itemName"><div v-if="item.must" style="color: red">*</div>{{item.name}}：</div>
      <div v-if="item.type === 'input'" :style="item.key === 'address'?'width:calc(100% - 100px)':''">
        <a-input v-model="item.val" :placeholder="item.place" :style="item.key === 'address'?'width:60%':''" />
      </div>
      <div v-if="item.type === 'radio'">
        <a-radio-group v-model="item.val">
          <a-radio value="1">男</a-radio>
          <a-radio value="2">女</a-radio>
        </a-radio-group>
      </div>
      <div v-if="item.type === 'cascader'">
        <a-cascader style="width: 182px" :value="item.val" :options="item.selectData" :placeholder="item.place" @change="e=>{cascaderChange(e,index)}" />
        <a-select
          show-search
          option-filter-prop="children"
          style="width: 181px"
          :filter-option="filterOption"
          @change="e=>{jiedaoChange(index,e)}"
          :value="item.street?item.street:undefined"
          placeholder="请选择街道"
          allowClear
        >
          <a-select-option v-for="(demo,idx) in jiedaoList" :value="demo.id" :key="idx">
            {{demo.city_name}}
          </a-select-option>
        </a-select>
      </div>
      <div v-if="item.type === 'birth'">
        <a-date-picker :default-value="item.val?moment(item.val, dateFormat):null" @change="(data,dataStr)=>{birthChange(data,dataStr,index)}" />
      </div>
      <div v-if="item.type === 'code'">
        <a-input style="width: 100px!important" v-model="item.val" :placeholder="item.place" />
        <a-button style="min-width:80px!important" :disabled="flag" @click="getSms(index)">{{time === 60 || time<=0?'获取验证码':time+'s'}}</a-button>
      </div>
      <div v-if="item.type === 'select'">
        <a-select
          show-search
          option-filter-prop="children"
          style="width: 181px"
          :filter-option="filterOption"
          @change="e=>{selectChange(index,e)}"
          :value="item.val?item.val:undefined"
          :placeholder="item.place"
          allowClear
        >
          <a-select-option v-for="(demo,idx) in item.selectData" :value="demo[item.idKey]" :key="idx">
            {{demo[item.nameKey]}}
          </a-select-option>
        </a-select>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    name:'appendStore',
    props:{
      appendData: Array
    },
    data(){
      return {
        time:60,
        setTime:null,
        flag:false,
        jiedaoList:[],
        dateFormat: 'YYYY-MM-DD'
      }
    },
    created() {
      this.appendData.forEach(item=>{
        if(item.type === 'cascader'){
          if(item.val.length>=0){
            item.selectData.forEach(pro=>{
              if(pro.id === item.val[0]){
                pro.children.forEach(city=>{
                  if(city.id === item.val[1]){
                    city.children.forEach(qu=>{
                      if(qu.id === item.val[2]){
                        this.jiedaoList = qu.street
                      }
                    })
                  }
                })
              }
            })
          }
        }
      })
    },
    methods:{
      moment,
      cascaderChange(e,index){
        let data = this.appendData[index].selectData;
        this.appendData[index].stree = '';
        data.forEach(item=>{
          if(item.id === e[0]){
            item.children.forEach(demo=>{
              if(demo.id === e[1]){
                demo.children.forEach(list=>{
                  if(list.id === e[2]){
                    this.jiedaoList = list.street
                  }
                })
              }
            })
          }
        });
        this.appendData[index].val = e;
      },
      jiedaoChange(index,e){
        this.appendData[index].street = e;
      },
      birthChange(data,dataStr,index){
        this.appendData[index].val = dataStr;
      },
      selectChange(index,idx){
        this.appendData[index].val = idx;
      },
      filterOption(input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
      },
      getSms(index){
        let phone = '';
        this.appendData.forEach(item=>{
          if(item.key === 'phone') phone = item.val
        });
        if(!phone) return this.$message.info('请输入手机号');
        this.Api.customerSms({phone:phone}).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.flag = true;
          this.setTime = setInterval(()=>{
            this.time = this.time-1;
            if(this.time === 0 || this.time<=0){
              this.time = 60;
              clearInterval(this.setTime);
              return this.flag = false
            }
          },1000)
        })
      },
      sendData(){
        let configData = {};
        for(let i=0;i<this.appendData.length;i++){
          if(this.appendData[i].must && !this.appendData[i].val) return this.$message.info(this.appendData[i].place);
          if(this.appendData[i].type === 'cascader' && !this.appendData[i].street) return this.$message.info("请选择街道");
          configData[this.appendData[i].key] = this.appendData[i].val;
          if(this.appendData[i].type === 'cascader'){
            configData[this.appendData[i].key].push(this.appendData[i].street)
          }
        }
        let address = configData.address;
        configData.address = {};
        configData.address.province = address[0];
        configData.address.city = address[1];
        configData.address.county = address[2];
        configData.address.street = address[3];

        this.$emit('sendData',configData);
      }
    }
  }
</script>
<style lang="less" scoped>
  .appendMember{
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 33%;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .itemName{
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: 100px;
        justify-content: flex-end;
      }
    }
  }
</style>
